<template>
	<view class="">
		<view class="bgIndex padding30">
			<view class="flex-between " @click.stop="userInfoFn(circleDetail)">
				<view class="flex-start-center">
					<image class="img" :src="circleDetail.avatar" mode=""></image>
					<view class="margin-left_10rpx">
						<view class="font-weight " style="color: #666666;margin-bottom: 10rpx;">
							{{circleDetail.nickname}}
						</view>
						<view class="flex">
							<text style="margin-right: 10rpx;color: #C0C0C0;">发布于 {{circleDetail.create_time}}</text>

						</view>
					</view>
				</view>
				<view v-if="useId!==circleDetail.uid"
					:class="circleDetail.is_follow==0?'followBtn flex':'NowFollowBtn flex'">
					{{circleDetail.is_follow==0? '关注':'已关注'}}
				</view>
				<!-- <view class="followBtn flex">
					关注
				</view> -->
			</view>
			<view class="margin_20rpx_0" style="font-size: 26rpx;">
				{{circleDetail.title}}
			</view>

			<view class="flex-start-center-wrap">

				<block v-for="(img,indexss) in circleDetail.img" :key="indexss">
					<image class="image" :src="img" @click="imgScare(circleDetail.img,2,indexss)" mode="aspectFill"></image>
				</block>

			</view>


			<view class="margin-top_30rpx flex-start-center">
			<!-- 	<button open-type="share" class="v-btncss">
					<view class="flex-start-center">
						<image class="share" :src="share" mode=""></image>
						<text style="color: rgb(153, 153, 153);margin-bottom: 5rpx;">分享</text>
					</view>
				</button> -->
				<view class="flex-start-center" v-if="circleDetail.city_name">
					<image class="imgAddress" :src="path" mode=""></image>
					<view class="">
						{{circleDetail.city_name}}
					</view>
				</view>

			</view>



			<view class="font-weight margin-top_20rpx margin-bottom_40rpx" v-if="circleDetail&&circleDetail.comment">
				{{'全部评论('+circleDetail.comment.length+')条'}}
			</view>
			<block v-if="commentList.length">
				<view class="allComments flex-between-start" v-for="(item,index) in commentList" :key="index">
					<image @click.stop="userInfoFn(item)" class="commentator" :src="item.avatar" mode=""></image>
					<view class="" style="width:500rpx;">
						<text @click.stop="userInfoFn(item)" style="color: rgb(153, 153, 153);">{{item.nickname}}</text>
						<view @click.stop="userInfoFn(item)" style="margin-top: 15rpx;" class="">
							<text>{{item.content}}</text>

						</view>
						<view class="margin_20rpx_0" @click.stop="reply(item.nickname,item.id)">
							<text style="color: rgb(153, 153, 153);">{{item.create_time}}</text> <text
								style="margin-left: 10rpx;">回复</text>
						</view>
						<view class="">
							<!--  -->
							<view class="" v-for="(items,i) in item.son_comment" :key="i" v-if="!isExpand?i<2:true">
								<view class="flex-between-start">
									<image class="respondent" :src="items.avatar" mode=""></image>
									<view class="" style="width:370rpx;">
										<view style="margin-top: 13rpx;">
											<text style="color: rgb(153, 153, 153);">{{items.nickname}}</text>
										</view>
										<view style="margin-top: 7rpx;">
											回复<text
												style="color: rgb(153, 153, 153);margin: 0 10rpx;">{{items.ru_nickname}}</text>
											<text>{{items.content}}</text>
										</view>

									</view>
									
									<view class="flex-start-center" style="min-width:100rpx;"
										@click.stop="circleLikesFn(items.id,items.is_like,items.comment_id)">

										<uni-icons class="share" :color="items.is_like==1?'#fba1ab':'#999999'"
											:type="items.is_like==1?'heart-filled':'heart'" size="20"></uni-icons>

										<text
											style="color: rgb(153, 153, 153);margin-left:10rpx;vertical-align: baseline;">{{items.like_number}}</text>
									</view>
								</view>

								<view class="margin_10rpx_0" @click.stop="reply(items.nickname,items.id)">
									<text style="color: rgb(153, 153, 153);">{{items.create_time}}</text> <text
										style="margin-left: 10rpx;">回复</text>
								</view>
							</view>
							
							<view v-if="currentIndex==index?!isExpand:true" class="margin_10rpx_0 flex-start-center"
								style="color: rgb(121, 141, 254);" @click.stop="expandFn('expand',item.id,index)">
								<view class="" v-if="replyCommentNumberFn(item.comment_number)">
									<text>展开{{replyCommentNumberFn(item.comment_number)}}回复</text><uni-icons
										type="right" color="#798dfe" size="16"></uni-icons>
								</view>

							</view>
							<view v-else class="margin_10rpx_0 flex-start-center" style="color: rgb(121, 141, 254);"
								@click.stop="expandFn('close')">
								<text>收起</text><uni-icons type="down" color="#798dfe" size="16"></uni-icons>
							</view>

						</view>
					</view>
					<!-- 	<view class="flex-start-center" style="margin-right: 13rpx;"
							@click="circleLikesFn(item.id,item.is_like)">
						
							<uni-icons class="share" :color="item.is_like==1?'#fba1ab':'#999999'"
								:type="item.is_like==1?'heart-filled':'heart'" size="20"></uni-icons>
							
							<text style="color: rgb(153, 153, 153);margin-left: 10rpx;vertical-align: sub;">{{item.like_number}}</text>
						</view> -->
					<view class="" style="margin-right: 13rpx;"
						@click.stop="circleLikesFn(item.id,item.is_like)">

						<uni-icons class="share" :color="item.is_like==1?'#fba1ab':'#999999'"
							:type="item.is_like==1?'heart-filled':'heart'" size="20"></uni-icons>

						<text style="color: rgb(153, 153, 153);margin-bottom: 5rpx;vertical-align: baseline;">{{item.like_number}}</text>
					</view>

				</view>

			</block>
			<block v-else>
				<image :src="none1" mode=""></image>

			</block>

		</view>
		<view class="" style="height: 120rpx;">

		</view>
		<view class="bgFF flex">
			<view class="comment flex-between">
				<view class="flex-align-center">
					<uni-icons class="search-img" type="chat" size="25"></uni-icons>
					<!-- <image class="search-img" :src="search" mode=""></image> -->
					<input :placeholder="placeholderText" v-model="searchVal" @input="changeInput"
						@confirm="changeSearch" style="width: 500rpx;line-height: 1em; "
						placeholder-style="font-size:28rpx;color:#A1A1A1;" />
				</view>
				<view
				    style="margin-right: 20rpx;"
					:style="{color:searchVal?'rgb(121, 95, 241)':' rgb(153, 153, 153)'}"
					class="" @click="postComments()">
					发表评论
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				none1: this.$img.none1,
				share: this.$img.share,
				search: this.$img.search,
				path: this.$img.path,
				userInfo: uni.getStorageSync("userInfo"),
				pictureList: ['http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/2024-06-08/fc702202406081504044654.png',
					'http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/2024-06-08/7ab91202406081504112378.png',
					'http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/2024-06-08/fc702202406081504044654.png',
					'http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/2024-06-08/fc702202406081504044654.png'
				],
				isExpand: false,
				circleDetail: null,
				useId: uni.getStorageSync("userInfo").id,
				searchVal: '',
				id: '',
				commentList: [],
				placeholderText: '说写什么...',
				// 1 是发表评论 2 是回复评论
				commentStatus: 1,
				replyId: null,
				replyCommentList: [],
				currentIndex: 0,
				shareSignBol: false





			}
		},
		computed: {
			replyCommentNumberFn: function() {
				return function(num) {

					if (num > 2) {
						return num - 2
					} else {
						return 0
					}
				};
			}
		},
		onLoad(options) {
			
			// uni.showModal({
			// 	title: '提示',
			// 	content: JSON.stringify(options),
			// 	success: async (res) => {
			// 		if (res.confirm) {
			
						
			// 		} else if (res.cancel) {
			
			// 		}
			// 	}
			// });
			this.$sun.toast(JSON.stringify(options))
			this.circleInfoFn(options.uid)
			this.commentListFn(options.uid)

			this.id = options.uid
			if (options.shareSign) {
				// 那么分享进来的只能读不能操作如果操作自己注册

				this.shareSignBol = true
			}
		},
		methods: {
			changeInput(e) {
				console.log(e)
				this.searchVal = e.detail.value

			},

			onShareAppMessage(res) {

				// path: '/pages/index/index?goods_id=' + this.detailInfo.id + '&uid=' + this.uid
				return {
					// 自定义分享标题
					title: this.circleDetail.title,
					imageUrl: this.circleDetail.img ? this.circleDetail.img : '',
					path: 'pagesB/index/reviewDetails?uid=' + this.id + '&shareSign=1'
				};
			},
			imgScare(img,len,index) {
				console.log(img)
				
				if(len==1){
					uni.previewImage({
						urls: [img],
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {
								
							},
							fail: function(err) {
								
							}
						}
					});
				}else{
					uni.previewImage({
						urls: img,
						current:index,
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {
								
							},
							fail: function(err) {
								
							}
						}
					});
				}
			
			
			},
			// imgScare(img) {
			// 	console.log(img)
			// 	uni.previewImage({
			// 		urls: [img],
			// 		longPressActions: {
			// 			itemList: ['发送给朋友', '保存图片', '收藏'],
			// 			success: function(data) {
			// 				console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
			// 			},
			// 			fail: function(err) {
			// 				console.log(err.errMsg);
			// 			}
			// 		}
			// 	});
			
			
			// },






			async circleLikesFn(id, like, pid) {
				if (this.shareSignBol) {
					this.$sun.toast('当前为阅读模式', 'none')

				} else {
					const result = await this.$http.post({
						url: this.$api.commentLike,
						data: {
							is_like: like == 0 ? 1 : 0,
							comment_id: id,

						},
						headers: {
							'Authorization': this.userInfo.token
						}

					})
					if (result.code == 0) {

						let findIndex = this.commentList.findIndex(item => item.son_comment && item.son_comment.some(
							subItem => subItem.comment_id === pid));

						console.log(findIndex, this.currentIndex)
						if (this.isExpand && this.currentIndex == findIndex) {

							this.replyCommentListFn(pid, 'isExpand')
						} else if (this.isExpand) {
							this.commentListFn(this.id, 'isExpand')
						} else {
							this.commentListFn(this.id)
						}



						this.$sun.toast(result.message, 'none')

					} else {
						this.$sun.toast(result.message, 'none')
					}
				}
			},
			userInfoFn(item) {

				if (this.shareSignBol) {
					this.$sun.toast('当前为阅读模式', 'none')
				} else {
					this.$sun.navGo('/pagesB/index/socialDetails', {
						uid: item.uid
					})
				}

			},
			async commentListFn(id, isExpand) {
				const result = await this.$http.post({
					url: this.$api.commentList,
					data: {
						id: id,
						limit: 100,
						page: 1

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})
				if (result.code == 0) {
					console.log(result)



					if (isExpand) {
						// this.commentList = this.list.concat(this.commentList); son_comment

						// console.log(result.data.list.filter(item1 => this.replyCommentList.some(item2 => item1.id === item2.pid)))

						let findIndex = result.data.list.findIndex(item1 => this.replyCommentList.some(item2 => item1
							.id === item2.comment_id))
						result.data.list.forEach((item, index) => {
							console.log(index)
							if (index == findIndex) {

								item.son_comment = [...item.son_comment, ...this.replyCommentList]
								// item.son_comment.concat(this.replyCommentList)
							}
						})

						console.log(this.commentList)

					}
					this.commentList = result.data.list
					// this.$sun.toast(result.message, 'none')

				} else {
					this.$sun.toast(result.message, 'none')
				}
			},
			async replyCommentListFn(id, isExpand) {
				const result = await this.$http.post({
					url: this.$api.replyCommentList,
					data: {
						id: id,
						limit: 1000,
						page: 1

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})
				if (result.code == 0) {
					console.log(result)

					this.replyCommentList = result.data.list
					this.$sun.toast(result.message, 'none')

					if (isExpand) {
						this.commentListFn(this.id, 'isExpand')
					}

				} else {
					this.$sun.toast(result.message, 'none')
				}
			},
			expandFn(name, id, index) {

				if (name == 'expand') {
					this.isExpand = true
				} else {
					this.isExpand = false
				}

				if (id) {
					this.currentIndex = index
					this.replyCommentListFn(id, 'isExpand')
				}

			},
			async postComments() {
				 if(this.userInfo.disable==0){
					 this.$sun.toast('该用户已被拉黑', 'none')
				 }else{
					 if (!this.shareSignBol) {
					 	if(this.searchVal){
					 		console.log(this.commentStatus)
					 		const commentApi = this.commentStatus == 1 ? this.$api.comment : this.$api.replyComment
					 		const result = await this.$http.post({
					 			url: commentApi,
					 			data: {
					 				id: this.commentStatus == 1 ? this.id : this.replyId,
					 				content: this.searchVal
					 		
					 			},
					 			headers: {
					 				'Authorization': this.userInfo.token
					 			}
					 		
					 		})
					 		if (result.code == 0) {
					 			console.log(result)
					 			// this.$sun.toast(result.message, 'none')
					 			this.commentListFn(this.id)
					 			this.replyCommentListFn(this.replyId)
					 		    this.circleInfoFn(this.id)
					 			this.searchVal = ''
					 		
					 		} else {
					 			this.$sun.toast(result.message, 'none')
					 		}
					 	}else{
					 		this.$sun.toast('请填写发表评论', 'none')
					 	}
					 } else {
					 	// 
					 	this.$sun.toast('当前为阅读模式', 'none')
					 }
				 }


			},
			reply(name, replyId) {
				if(this.userInfo.disable==0){
					this.$sun.toast('当前用户已被拉黑', 'none')
				}else{
					if (!this.shareSignBol) {
					
						this.placeholderText = '回复 ' + name
						this.commentStatus = 2
						this.replyId = replyId
					} else {
						//
						this.$sun.toast('当前为阅读模式', 'none')
					}
					
				}



			},
			async circleInfoFn(uid) {
				const result = await this.$http.post({
					url: this.$api.circleInfo,
					data: {
						id: uid

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})
				if (result.code == 0) {
					console.log(result)




					if (result.data.img.includes(',')) {
						result.data.img = result.data.img.split(',').map((item) => item.trim());
					} else {
						if (result.data.img.length) {
							result.data.img = result.data.img.split().map((item) => item.trim());
						} else {
							result.data.img = []
						}
					}
					this.circleDetail = result.data

				} else {
					this.$sun.toast(result.message, 'none')
				}

			}
		}
	}
</script>

<style lang="less" scoped>
	.bgFF {
		background-color: #fff;
		position: fixed;
		bottom: 0rpx;
		height: 140rpx;
		z-index: 99;

		.comment {
			width: 718rpx;
			// justify-content: center;
			display: flex;
			align-items: center;
			margin: 20rpx;
			height: 86rpx;
			margin-right: 24rpx;
			background: rgb(240, 240, 240);

			border-radius: 84rpx;


			.search-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
				margin-left: 20rpx;
				margin-bottom: 10rpx;
			}

			.address-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
				margin-left: 20rpx;
			}

			.icon_close {
				padding: 0rpx 15rpx;
				width: 36rpx;
				height: 36rpx;
				margin-right: 30rpx;
			}
		}
	}

	.bgIndex {

		.img {
			width: 104rpx;
			height: 104rpx;
			border-radius: 50%;
		}

		.v-btncss {
			padding: 0;
			margin-right: 10rpx;
		}

		.share {
			width: 35rpx;
			height: 35rpx;
			vertical-align: middle;
			margin-right: 5rpx;
		}

		.followBtn {
			border-radius: 100rpx;
			width: 120rpx;
			height: 60rpx;
			color: #fff;
			background: linear-gradient(90.00deg, rgb(162, 101, 252), rgb(223, 111, 252) 100%);
		}

		.NowFollowBtn {
			border-radius: 100rpx;
			width: 120rpx;
			height: 60rpx;
			color: rgb(153, 153, 153);
			background: rgb(238, 238, 239);
		}

		.image {
			width: 176rpx;
			height: 176rpx;
			border-radius: 20rpx;
			padding: 5rpx;
		}

		.imgAddress {
			margin-right: 8rpx;
			padding: 30rpx 0;
			width: 26.66rpx;
			height: 32rpx;
		}

		.allComments {
			.commentator {
				width: 104rpx;
				height: 104rpx;
				border-radius: 50%;
				margin-right: 10rpx;
			}

			.respondent {
				margin-right: 10rpx;
				width: 56rpx;
				height: 56rpx;
				border-radius: 50%;
			}

			.likeImg {
				margin-top: 58rpx;
				width: 36.26rpx;
				height: 33.44rpx;
			}

			.likeImgs {
				margin-top: 20rpx;
				width: 36.26rpx;
				height: 33.44rpx;
			}
		}




	}
</style>